import React from 'react';
import { Row, Col, Select, Button } from 'antd';
import _ from 'lodash';

import {
    WeaLocaleProvider,
    WeaNewScroll,
    WeaSearchGroup,
    WeaFormItem,
    WeaUpload,
    WeaInputNumber,
    WeaSelect,
    WeaCheckbox,
    WeaColorPicker,
    WeaHelpfulTip,
} from 'ecCom';

import WeaMaterialLib from '../wea-materiallib';

const getLabel = WeaLocaleProvider.getLabel;

class Setting extends React.Component {
    constructor(props) {
        super(props);
        this.state = Object.assign({}, {
            type: 'none',
            color: '#fff',
            opacity: 100,
            imgs: [
                '/spa/portal/images/background/bg1.jpg',
                '/spa/portal/images/background/bg2.jpg',
                '/spa/portal/images/background/bg3.jpg',
                '/spa/portal/images/background/bg4.jpg',
                '/spa/portal/images/background/bg5.jpg',
            ],
            img: '',
            fillStyle: 'stretch',
            autoPlay: false,
            autoPlaySpeed: 5,
            allowToChange: false,
            btnColor: '#fff',
            video: '',
            videoSize: { width: 1920, height: 1080 },
        }, props.background || {});
        this.onSelect = this.onSelect.bind(this);
        this.onUpload = this.onUpload.bind(this);
        this.onDelete = this.onDelete.bind(this);
    }

    render() {
        const {
            type,
            color,
            opacity,
            imgs,
            img,
            fillStyle,
            autoPlay,
            autoPlaySpeed,
            allowToChange,
            btnColor,
            video,
            videoSize,
        } = this.state;
        const colProps = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };

        return (
            <div className="wea-portal-background-setting-content" ref={content => this.content = content}>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@aop3uw`} title={getLabel(81711, '基本信息')} showGroup={true} center>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4dz5w8`} label={getLabel(388190, '背景类型')} {...colProps}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@rycj63`}
                          options={[
                                { key: 'color', showname: getLabel(387752, '纯背景色') },
                                { key: 'img', showname: getLabel(388191, '图片背景') },
                                { key: 'video', showname: getLabel(388192, '视频背景') },
                            ]}
                          detailtype={3}
                          value={type}
                          onChange={value => this.onChange({ type: value })}
                        />
                    </WeaFormItem>
                </WeaSearchGroup>
                {
                    type === 'color' && (
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@80ycut`} title={getLabel(387750, '背景设置')} showGroup={true} center>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@tp0ga1`} label={getLabel(387752, '纯背景色')} {...colProps}>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@cmeo64`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r58go7`} span={8}>
                                        <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@s6titf`} value={color} onChange={value => this.onChange({ color: value })} />
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@s5afax`} span={16}>
                                        <span>{getLabel(387909, '透明度')}</span>
                                        <div style={{ display: 'inline-block', width: '67px', marginTop: '2px', marginLeft: '10px' }}>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ajkga4`} min={0} max={100} value={opacity} onChange={value => this.onChange({ opacity: value })} />
                                        </div>
                                    </Col>
                                </Row>
                            </WeaFormItem>
                        </WeaSearchGroup>
                    )
                }
                {
                    type === 'img' && (
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@1zfcwv`}
                          title={getLabel(387746, '选择背景图片')}
                          showGroup={true}
                          customComponent={(
                                <div>
                                    <div style={{ display: 'inline-block' }}>
                                        <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@xa76mh`} uploadUrl="/api/doc/upload/uploadFile" category="string" limitType="png,jpg,jpeg,gif" onChange={this.onUpload}>
                                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1nothd`} type="primary">{getLabel(387753, '直接上传')}</Button>
                                        </WeaUpload>
                                    </div>
                                    <div style={{ display: 'inline-block', margin: '0 8px' }}>
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@l8j6um`} type="button" multiCheck={true} onChange={this.onSelect} getTooltipContainer={() => this.content}>
                                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tajjzz`} type="primary">{getLabel(387747, '从素材库中选择')}</Button>
                                        </WeaMaterialLib>
                                    </div>
                                    <div style={{ display: 'inline-block' }}>
                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kp4xug`} type="primary" onClick={() => this.onChange({ imgs: [], img: '' })}>{getLabel(387748, '全部清除')}</Button>
                                    </div>
                                </div>
                            )}
                        >
                            <div className="wea-portal-background-setting-imgs">
                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@3lk6jm`} height="100%">
                                    {
                                        imgs.map((item, index) => {
                                            const selected = item === img;

                                            return (
                                                <div key={index} className="wea-portal-background-setting-img">
                                                    <img src={item} alt="" className={selected ? 'selected' : ''} onClick={() => this.onChange({ img: item })} />
                                                    <div className="wea-portal-background-setting-img-delete" onClick={() => this.onDelete(item)}>×</div>
                                                </div>
                                            );
                                        })
                                    }
                                    <div style={{ clear: 'both' }} />
                                </WeaNewScroll>
                            </div>
                            <p style={{ lineHeight: '25px', color: '#848484' }}>{getLabel(387749, '单击设置默认背景（建议尺寸1920*1080）')}</p>
                        </WeaSearchGroup>
                    )
                }
                {
                    type === 'video' && (
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9b53xl`}
                          title={getLabel(388193, '选择背景视频')}
                          showGroup={true}
                          customComponent={(
                                <div>
                                    <div style={{ display: 'inline-block' }}>
                                        <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@o0ez8j`} uploadUrl="/api/doc/upload/uploadFile" category="string" limitType="mp4" onChange={(ids, list) => this.onChange({ video: list[0] ? list[0].imgSrc : '' })}>
                                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@347xba`} type="primary">{getLabel(387753, '直接上传')}</Button>
                                        </WeaUpload>
                                    </div>
                                    <div style={{ display: 'inline-block', margin: '0 8px' }}>
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@90k0l8`} type="button" onChange={value => this.onChange({ video: value })} getTooltipContainer={() => this.content}>
                                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1fl6bv`} type="primary">{getLabel(387747, '从素材库中选择')}</Button>
                                        </WeaMaterialLib>
                                    </div>
                                    <div style={{ display: 'inline-block' }}>
                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fy0dx1`} type="primary" onClick={() => this.onChange({ video: '' })}>{getLabel(311, '清除')}</Button>
                                    </div>
                                </div>
                            )}
                        >
                            <div className="wea-portal-background-setting-video">
                                <video src={video} autoPlay loop muted />
                            </div>
                            <p style={{ lineHeight: '25px', color: '#848484' }}>{`${getLabel(388194, '视频尺寸建议')}1920*1080`}</p>
                        </WeaSearchGroup>
                    )
                }
                {
                    type === 'img' && (
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@rldjq1`} title={getLabel(387750, '背景设置')} showGroup={true} center>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0izi0q`} label={getLabel(386582, '填充方式')} {...colProps}>
                                <Select ecId={`${this && this.props && this.props.ecId || ''}_Select@ldhvql`} className="wea-portal-background-setting-fill-style" value={fillStyle} onChange={value => this.onChange({ fillStyle: value })} getPopupContainer={() => this.content}>
                                    <Select.Option ecId={`${this && this.props && this.props.ecId || ''}_Select.Option@t97ouz`} value="fill">
                                        <div className="wea-portal-background-setting-fill-style-item">
                                            <img src="/spa/portal/images/fill.png" alt="" /><span>{getLabel(128030, '填充')}</span>
                                        </div>
                                    </Select.Option>
                                    <Select.Option ecId={`${this && this.props && this.props.ecId || ''})_Select.Option@h1oa2f`} value="adapt">
                                        <div className="wea-portal-background-setting-fill-style-item">
                                            <img src="/spa/portal/images/adapt.png" alt="" /><span>{getLabel(386583, '适应')}</span>
                                        </div>
                                    </Select.Option>
                                    <Select.Option ecId={`${this && this.props && this.props.ecId || ''}_Select.Option@9dukq7`} value="stretch">
                                        <div className="wea-portal-background-setting-fill-style-item">
                                            <img src="/spa/portal/images/stretch.png" alt="" /><span>{getLabel(386584, '拉伸')}</span>
                                        </div>
                                    </Select.Option>
                                    <Select.Option ecId={`${this && this.props && this.props.ecId || ''}_Select.Option@sx9k10`} value="tile">
                                        <div className="wea-portal-background-setting-fill-style-item">
                                            <img src="/spa/portal/images/tile.png" alt="" /><span>{getLabel(19852, '平铺')}</span>
                                        </div>
                                    </Select.Option>
                                    <Select.Option ecId={`${this && this.props && this.props.ecId || ''}_Select.Option@bp66zd`} value="center">
                                        <div className="wea-portal-background-setting-fill-style-item">
                                            <img src="/spa/portal/images/center.png" alt="" /><span>{getLabel(16203, '居中')}</span>
                                        </div>
                                    </Select.Option>
                                </Select>
                            </WeaFormItem>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0znufj`} label={getLabel(387146, '自动轮播')} {...colProps}>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9wh4rb`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9o56vy`} span={8}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@y9t5i8`} display="switch" value={autoPlay} onChange={value => this.onChange({ autoPlay: value === '1' })} />
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hq6xq5`} span={16}>
                                        <span style={{ float: 'left', height: '30px', lineHeight: '30px' }}>{getLabel(387147, '轮播速度')}</span>
                                        <div style={{ float: 'left', width: '67px', marginTop: '2px', marginLeft: '10px' }}>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@azr2iz`} value={autoPlaySpeed} disabled={!autoPlay} onChange={value => this.onChange({ autoPlaySpeed: value })} />
                                        </div>
                                    </Col>
                                </Row>
                            </WeaFormItem>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@mwkklv`} label={getLabel(387751, '允许前端手动切换背景')} {...colProps}>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@7n10kx`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bcmpz5`} span={8}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@trlx5q`} display="switch" value={allowToChange} onChange={value => this.onChange({ allowToChange: value === '1' })} />
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ya16k4`} span={16}>
                                        <span style={{ float: 'left', height: '30px', lineHeight: '30px' }}>{getLabel(386625, '图标颜色')}</span>
                                        <div style={{ float: 'left', marginTop: '1px', marginLeft: '10px' }}>
                                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@p7ujgw`} value={btnColor} onChange={value => this.onChange({ btnColor: value })} />
                                        </div>
                                    </Col>
                                </Row>

                            </WeaFormItem>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qjfjdd`} label={getLabel(387752, '纯背景色')} {...colProps}>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jjj1o1`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wfew0f`} span={8}>
                                        <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@jva6sf`} value={color} onChange={value => this.onChange({ color: value })} />
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zcw36t`} span={16}>
                                        <span style={{ float: 'left', height: '30px', lineHeight: '30px' }}>{getLabel(387909, '透明度')}</span>
                                        <div style={{ float: 'left', width: '67px', marginTop: '2px', marginLeft: '10px' }}>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@rsqhrx`} min={0} max={100} value={opacity} onChange={value => this.onChange({ opacity: value })} />
                                        </div>
                                    </Col>
                                </Row>
                            </WeaFormItem>
                        </WeaSearchGroup>
                    )
                }
                {
                    type === 'video' && (
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ay7oxi`} title={getLabel(387750, '背景设置')} showGroup={true} center>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@xm4z61`} label={getLabel(388195, '视频原始尺寸')} {...colProps}>
                                <span>{getLabel(26901, '宽')}</span>
                                <div style={{ display: 'inline-block', width: '70px', margin: '2px 10px 0 10px' }}>
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ediix2`} value={videoSize.width} onChange={value => this.onChange({ videoSize: { ...videoSize, width: value } })} />
                                </div>
                                <span>{getLabel(27734, '高')}</span>
                                <div style={{ display: 'inline-block', width: '70px', margin: '2px 10px 0 10px' }}>
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@4dekju`} value={videoSize.height} onChange={value => this.onChange({ videoSize: { ...videoSize, height: value } })} />
                                </div>
                                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@fw8eeo`} title={getLabel(388196, '为达到最佳显示效果，需填写视频原始尺寸，根据视频的原始尺寸，结合浏览器大小，才可计算最佳显示宽高。')} />
                            </WeaFormItem>
                        </WeaSearchGroup>
                    )
                }
            </div>
        );
    }

    onChange(obj) {
        const background = { ...this.state, ...obj };
        this.setState({ ...background });
        this.props.onChange(background);
    }

    onSelect(value) {
        const { imgs } = this.state;

        value.split(',').forEach((item) => {
            imgs.push(item);
        });

        this.onChange({ imgs: _.uniq(imgs) });
    }

    onUpload(ids, list) {
        const { imgs } = this.state;

        list.forEach((item) => {
            imgs.push(item.imgSrc);
        });

        this.onChange({ imgs: _.uniq(imgs) });
    }

    onDelete(img) {
        const { imgs } = this.state;

        _.pull(imgs, img);

        this.onChange({ imgs, img: imgs[0] || '' });
    }
}

export default Setting;
